<template>
  <v-dialog>
    <v-form v-model="valid">
      <v-card
          class="mx-auto pa-10" min-width="150dvh"
          max-width="150dvh"
      >
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>
          <v-row>
            <v-col>
              <v-text-field      :disabled  ="disabled"
                  density="compact" v-model="addResourceGroupRequest.code"
                  variant="outlined"
                  :label="$t('table.header.resource.code')"
                  :placeholder="$t('placeholder.common.code')" :rules="[requiredCode]"
                  :error-messages="addResourceGroupValidationNotificationMessage.code"
                  clearable :maxlength="addResourceValidationConfig.codeMaxLength"
                  :counter="addResourceValidationConfig.codeMaxLength"
              />
            </v-col>
            <v-col>
              <v-text-field
                  density="compact" v-model="addResourceGroupRequest.name"
                  variant="outlined"
                  :label="$t('table.header.resource.name')"         :disabled  ="disabled"
                  :placeholder="$t('placeholder.common.name')" :rules="[requiredName]"
                  :error-messages="addResourceGroupValidationNotificationMessage.name"
                  clearable :maxlength="addResourceValidationConfig.nameMaxLength"
                  :counter="addResourceValidationConfig.nameMaxLength"
              />
            </v-col>
            <v-col>
              <v-autocomplete
                  density="compact" v-model="addResourceGroupRequest.categoryId" :rules="[requiredCategoryId]"
                  :error-messages="addResourceGroupValidationNotificationMessage.categoryId"
                  variant="outlined" :label="$t('table.header.resource.category')"     :disabled  ="disabled"
                  :placeholder="$t('placeholder.common.select')" :items="category" item-title="name"
                  item-value="id" clearable/>
            </v-col>
          </v-row>

          <v-row>

            <v-col>
              <v-combobox
                  v-model="authorities"                  :disabled  ="disabled"         
                  :label="$t('table.header.resource.permission')" item-title="name"
                  item-value="id" :placeholder="$t('placeholder.common.select')"
                  chips variant="outlined" clearable closable-chips
                  multiple readonly density="compact"
              ></v-combobox>
            </v-col>
          </v-row>


          <v-text-field
              :label="$t('text.common.searchTextField')" :placeholder="$t('placeholder.common.search')"
              variant="outlined"
              clearable density="compact"
              @update:modelValue="val  => getResourceList(val) "   v-if="!disabled"
          ></v-text-field>
          <v-virtual-scroll
              :items="resource"
              height="20dvh"
          >
            <template v-slot:default="{ item }">
              <v-list-item :disabled="item.disabled">
                <v-list-item-title @click="addResource(item)">{{
                    item.name + SPLITTING_SYMBOL + item.code
                  }}
                </v-list-item-title>
              </v-list-item>
            </template>
          </v-virtual-scroll>

        </v-card-text>
        <v-card-actions>
          <button-disagree @click="closeEvent()"></button-disagree>
          <button-agree @click="confirmEvent()" :disabled="!valid"></button-agree>
        </v-card-actions>
      </v-card>
    </v-form>
  </v-dialog>

</template>
<script setup lang="ts">
import {Category} from "~/resource/types/common/category";
import {SelectItem} from "~/resource/types/common/select-item";
import {CategoryItem} from "~/resource/types/common/category-item";
import {SPLITTING_SYMBOL} from "~/resource/constants/common/constant";
import {
  AddResourceGroupValidationNotificationMessage
} from "~/resource/types/resource/add-resource-group-validation-notification-message";
import {AddResourceGroupRequest} from "~/resource/types/resource/add-resource-group-request";
import {AddResourceGroupValidationConfig} from "~/resource/types/resource/add-resource-group-validation-config";
import {consola} from "consola";
import {OperationType} from "~/resource/enums/operation-type";

const addResourceGroupValidationNotificationMessage = ref<AddResourceGroupValidationNotificationMessage>(new AddResourceGroupValidationNotificationMessage(null, null, null))
const addResourceGroupRequest = ref<AddResourceGroupRequest>(new AddResourceGroupRequest(null, null, null, null))
const props = defineProps<{
  id?: string | null,
  type?: keyof OperationType,
}>()
const emit = defineEmits<{
  (e: 'confirm'): void,
  (e: 'close'): void
}>()
const appConfig = useAppConfig();
const addResourceValidationConfig = ref<AddResourceGroupValidationConfig>(new AddResourceGroupValidationConfig(appConfig.validation.common.codeMaxLength, appConfig.validation.common.nameMaxLength, 5, 10))
const confirmEvent = () => {
  consola.log("xxx:", valid);
  emit('confirm');
  closeEvent();
}
const closeEvent = () => {
  emit('close');
}
const title = ref<string>('');
const disabled = ref<boolean>(false);
const category = ref<Array<Category>>([]);
const getCategoryList = async () => {
  category.value = [new Category("分类1", "001", 1), new Category("分类2", "002", 2)]
}
const authorities = ref<Array<CategoryItem>>([]);

const getAuthorities = async () => {
  authorities.value = [new CategoryItem("资源1" + SPLITTING_SYMBOL + "001", 1), new CategoryItem("资源2" + SPLITTING_SYMBOL + "002", 3)]
}
const resource = ref<Array<SelectItem>>([]);
const local = useLocale();
const valid = ref<boolean>(false);
const getResourceList = (val: string) => {
  if (val) {
    resource.value.push(new SelectItem("001", "001", "1111", false));
    resource.value.push(new SelectItem("资源3", "002", "21", false));
    resource.value.push(new SelectItem("资源4", "002", "323", true));
    resource.value.push(new SelectItem("资源5", "002", "4", true));
    resource.value.push(new SelectItem("资源6", "002", "52", true));
    resource.value.push(new SelectItem("资源7", "002", "255", true));
    resource.value.push(new SelectItem("资源8", "002", "25556", true));
    resource.value.push(new SelectItem("资源71", "002", "2555", true));
    resource.value.push(new SelectItem("资源82", "002", "25554", true));
    resource.value.push(new SelectItem("资源73", "002", "2553", true));
    resource.value.push(new SelectItem("资源84", "002", "25552", true));
    resource.value.push(new SelectItem("资源75", "002", "2552", true));
    resource.value.push(new SelectItem("资源86", "002", "25551", true));
    resource.value.push(new SelectItem(val, "001", "999", false));
  } else {
    resource.value = [];
  }
}
const addResource = (item: Category) => {
  authorities.value.push(new CategoryItem(item.name + SPLITTING_SYMBOL + item.code, item.id));
}
watch(() => resource.value.length, () => {
  resourceCanSelect();
});
watch(() => authorities.value.length, () => {
  resourceCanSelect()
});
const resourceCanSelect = () => {
  resource.value.forEach(e => {
    const exists = authorities.value.filter(f => f.id === e.id).length;
    e.disabled = !!exists;
  })
}
const requiredCategoryId = () => {
  if (!addResourceGroupRequest.value.categoryId) {
    addResourceGroupValidationNotificationMessage.value.categoryId = local.t('validation.common.required');
  } else {
    addResourceGroupValidationNotificationMessage.value.categoryId = null;
  }
  return true;
}

const requiredCode = () => {
  if (!addResourceGroupRequest.value.code) {
    addResourceGroupValidationNotificationMessage.value.code = local.t('validation.common.required');
  } else if (addResourceGroupRequest.value.code.length < addResourceValidationConfig.value.codeMinLength) {
    addResourceGroupValidationNotificationMessage.value.code = local.t('validation.resourceGroup.codeMinLength');
  } else {
    addResourceGroupValidationNotificationMessage.value.code = null;
  }
  return true;
}
const requiredName = () => {
  if (!addResourceGroupRequest.value.name) {
    addResourceGroupValidationNotificationMessage.value.name = local.t('validation.common.required');
  } else if (addResourceGroupRequest.value.name.length < addResourceValidationConfig.value.nameMinLength) {
    addResourceGroupValidationNotificationMessage.value.name = local.t('validation.resourceGroup.nameMinLength');
  } else {
    addResourceGroupValidationNotificationMessage.value.name = null;
  }
  return true;
}
const init = () => {
  if (props.type === OperationType.DETAIL.toString()) {
    disabled.value=true;
    title.value=     local.t('text.resourceGroup.detail');
     return;
  }
   getAuthorities();
   getCategoryList();   
}
init();


</script>